<template>
	<view class="page">
		<view class="status_bar">
			<view class="bar-bg"></view>
		</view>
		<view :class="{header:true,ipx:false,official:true}">
			<view :class="{'mp-wrap':true,ipx:false}">
				<view class="mp-logo">
					<image src="../../static/images/common/logo.jpg"></image>
				</view>
				<view class="info">
					<view class="name">好运买点餐</view>
					<view class="desc">关注公众号，下次可在公众号中"点餐"！</view>
					<view class="focus">关注</view>
				</view>
			</view>
		</view>
		<view class="business-wrap">
			<view class="business-info">
				<view class="business-logo">
					<image :src="shopInfo.logo"></image>
				</view>
				<view class="business-name">{{shopInfo.branch_shop_name}}</view>
				<view class="notice">公告： {{shopInfo.notice}}</view>
				<view class="home" @click="replacePage('/pages/main/main')"></view>
			</view>
		</view>
		<view class="tags">
			<view class="item-wrap">
				<view :class="{item:true,active:goodsAction}" @click="changeTab(true,false)">点餐</view>
				<view :class="{item:true, active:businessAction}" @click="changeTab(false,true)">商家</view>
			</view>
			<view class="tags-handle">
				<view class="myorder">
					<view class="myorder-icon"></view>
					<view class="text">订单</view>
				</view>
				<view class="line"></view>
				<view class="my"></view>
			</view>
		</view>
		<goods :isShow="goodsAction" :branchShopId="branch_shop_id" :gid="gid" :classifysData="classifys"
			:goodsData="goods" :shelfGoods="shelfGoods" @showGoodsDetails="showGoodsDetails" @incAmount="incAmount">
		</goods>
		<business-info :isShow="businessAction" :branchShopId="branch_shop_id" :infoData="shopInfo"></business-info>
		<!--只有在菜品展示组件显示的情况下，才显示购物车导航-->
		<view class="cart-main" v-show="goodsAction">
			<view class="handle-cart">
				<view class="cart-cle">
					<view class="cart-cle-2">
						<view class="cart-icon" id="cart-icon">
							<view class="badge">5</view>
						</view>
					</view>
				</view>
				<view class="total">￥100</view>
			</view>
			<view class="line"></view>
			<view class="submit">
				<template v-if="false">提交订单 &gt;</template>
				<template v-else>未选购商品</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapMutations
	} from "vuex";
	import Goods from "../../components/goods";
	import BusinessInfo from "../../components/business/info";
	export default {
		name: "goods",
		data() {
			return {
				goodsAction: true, //是否显示菜品展示组件
				businessAction: false, //是否显示商家信息组件
				branch_shop_id: "", //分店的id
				gid: "", //菜品的id
				shelfGoods: false, //是否有上架或下架的菜品
				amount: 0 //菜品的数量
			}
		},
		onLoad(opts) {
			//分店的id
			this.branch_shop_id = opts.branch_shop_id ? opts.branch_shop_id : "";
			//桌号
			this.table_code = opts.table_code ? opts.table_code : "";
			//获取菜品的id
			this.gid = opts.gid ? opts.gid : "";
			//获取商家信息
			this.getShopInfo({
				branch_shop_id: this.branch_shop_id
			});
			this.getClassifys({
				branch_shop_id: this.branch_shop_id,
				complete: () => {
					this.getGoods({
						branch_shop_id: this.branch_shop_id
					})
				}
			})
		},
		onShow() {
			if (this.goods && this.goods.length > 0) {
				this.getNewGoods({
					branch_shop_id: this.branch_shop_id,
					success: (data) => {
						for (let i = 0; i < this.goods.length; i++) {
							//有新上架或下架的菜品
							if (this.goods[i].goods.length != data[i].goods.length) {
								this.shelfGoods = true;
								//将菜品数据设置为空，然后再重新获取数据，解决scroll-view不会重新计算高度的问题
								this.SET_GOODS({
									goods: []
								})
								//重新获取最新的菜品
								this.getGoods({
									branch_shop_id: this.branch_shop_id
								})
							}
						}
					}
				})
			}
		},
		components: {
			Goods,
			BusinessInfo
		},
		computed: {
			...mapState({
				shopInfo: state => state.business.shopInfo,
				classifys: state => state.goods.classifys,
				goods: state => state.goods.goods,
				isLogin: state => state.user.isLogin
			})
		},
		methods: {
			...mapActions({
				getShopInfo: "business/getShopInfo", //获取商家信息
				getClassifys: "goods/getClassifys", //获取菜品分类
				getGoods: "goods/getGoods", //获取菜品
				getNewGoods: "goods/getNewGoods" //菜品上架或下架
			}),
			...mapMutations({
				SET_GOODS: "goods/SET_GOODS" //设置菜品数据
			}),
			//菜品展示组件与商家信息组件切换显示
			changeTab(goodsAction, businessAction) {
				this.goodsAction = goodsAction;
				this.businessAction = businessAction;
			},
			replacePage(url) {
				uni.redirectTo({
					url
				})
			},
			pushPage(url) {
				uni.navigateTo({
					url
				})
			},
			//显示菜品详情组件
			showGoodsDetails(gid, isMeal, amount, sellStatus, stock) {
				if (isMeal == '1') { //如果是套餐
					this.pushPage(
						`/pages/goods/meal?gid=${gid}&branch_shop_id=${this.branch_shop_id}&table_code=${this.table_code}`
					);
				} else { //非套餐
					this.gid = gid;
					this.amount = amount;
				}
			},
			//增加菜品数量
			incAmount(gid, newMealItems, mealItems) {
				if (this.isLogin) { //会员已登录
					//加入购物车
					console.log("已经登录-加入到购物车")
				} else { //会员未登录
					this.pushPage('/pages/login/login?branch_shop_id=' + this.branch_shop_id + '&table_code=' + this
						.table_code + '');
				}
			}
		},
		//分享小程序
		onShareAppMessage(res) {
			return {
				title: "点餐系统",
				path: '/pages/goods/index?branch_shop_id=' + this.branch_shop_id + '&table_code=' + this.table_code
			}
		},
	}
</script>

<style scoped>
	.page {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}

	.header {
		width: 100%;
		height: 230rpx;
		background-color: #E30019;
		position: relative;
		z-index: 1;
	}

	/* #ifndef H5 */
	.header.official {
		height: 280rpx;
	}

	/* #endif */
	.business-wrap {
		width: 100%;
		height: 100rpx;
		position: relative;
		z-index: 1;
	}

	.header.ipx.official {
		height: 320rpx;
	}

	.status_bar {
		background-color: #E30019
	}

	.status_bar .bar-bg {
		width: 90%;
		height: 100%;
		background-color: #FFFFFF;
		margin: 0 auto;
	}

	.business-wrap .business-info {
		width: 90%;
		height: 180rpx;
		background-color: #FFFFFF;
		position: absolute;
		z-index: 1;
		left: 50%;
		top: -80rpx;
		transform: translateX(-50%);
		box-shadow: 3px 3px 5px #efefef;
		border-radius: 5px;
	}

	.business-wrap .home {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		z-index: 1;
		background-image: url("~@/static/images/goods/home.png");
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.business-wrap .business-logo {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		z-index: 1;
		left: 35rpx;
		top: 15rpx;
	}

	.business-wrap .business-logo image {
		width: 100%;
		height: 100%;
		border-radius: 8px;
	}

	.business-wrap .business-name {
		width: 450rpx;
		height: 100rpx;
		font-size: 36rpx;
		color: #333333;
		position: absolute;
		z-index: 1;
		top: 20rpx;
		left: 156rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.business-wrap .promotion {
		width: 75%;
		height: 60rpx;
		position: absolute;
		z-index: 1;
		left: 156rpx;
		top: 80rpx;
		font-size: 26rpx;
		color: #E30019;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-decoration: underline;
	}

	.business-wrap .notice {
		width: 630rpx;
		height: 60rpx;
		position: absolute;
		z-index: 1;
		left: 35rpx;
		top: 130rpx;
		font-size: 26rpx;
		color: #999999;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tags {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px 25rpx;
		box-sizing: border-box;
	}

	.tags .item-wrap {
		width: auto;
		height: auto;
		display: flex;
	}

	.tags .item-wrap .item {
		width: auto;
		height: auto;
		color: #333333;
		font-size: 28rpx;
		padding: 10rpx 5rpx;
		margin-right: 30rpx;
	}

	.tags .item-wrap .item.focus {
		color: #E30019
	}

	.tags .item-wrap .item.active {
		border-bottom: 2px solid #ffd161;
		font-weight: bold;
	}

	.tags .myorder {
		width: 150rpx;
		height: 100%;
		border-radius: 15px;
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
	}

	.tags .myorder-icon {
		width: 40rpx;
		height: 40rpx;
		background-image: url("~@/static/images/goods/myorder.png");
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
		margin-right: 10rpx;
	}

	.tags .myorder .text {
		color: #333333;
		font-size: 28rpx;
	}

	.tags .tags-handle {
		display: flex;
		height: 50rpx;
	}

	.tags .tags-handle .line {
		width: 3px;
		height: 100%;
		background-color: rgba(245, 245, 245, 0.6);
	}

	.tags .tags-text {
		font-size: 28rpx;
		color: #FFFFFF;
		margin-left: 10rpx;
		border-radius: 5px;
		background-color: #E30019;
		padding: 5rpx 10rpx;
	}

	.tags .my {
		width: 40rpx;
		height: 40rpx;
		background-image: url("~@/static/images/main/my.png");
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
		margin-left: 10rpx;
	}

	.cart-main {
		width: 100%;
		height: 100rpx;
		background-color: #f6ab00;
		position: fixed;
		z-index: 90;
		left: 0px;
		bottom: 0px;
	}

	.cart-main .cart-cle {
		width: 130rpx;
		height: 130rpx;
		border-radius: 100%;
		background-color: #f6ab00;
		position: absolute;
		left: 56rpx;
		top: -40rpx;
	}

	.cart-main .cart-cle-2 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-color: #F8CE86
	}

	.cart-main .cart-icon {
		width: 60rpx;
		height: 60rpx;
		background-image: url("~@/static/images/main/cart.png");
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		z-index: 1;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.cart-main .badge {
		width: 50rpx;
		height: 50rpx;
		border-radius: 100%;
		background-color: #ff2400;
		position: absolute;
		right: -35rpx;
		top: -35rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 50rpx;
		white-space: nowrap;
		overflow: hidden;
	}

	.cart-main .total {
		font-size: 36rpx;
		color: #FFFFFF;
		width: auto;
		height: auto;
		position: absolute;
		left: 180rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.cart-main .line {
		width: 2px;
		height: 62rpx;
		background-color: rgba(255, 255, 255, 0.6);
		position: absolute;
		z-index: 1;
		left: 507rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.cart-main .submit {
		width: 175rpx;
		height: 60rpx;
		position: absoLlute;
		z-index: 1;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 60rpx;
	}

	.cart-main .handle-cart {
		width: 65%;
		height: 100%;
	}

	.mp-wrap {
		width: 90%;
		margin: 0 auto;
		height: 180rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		box-sizing: border-box;
		padding: 0px 20rpx;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		overflow: hidden;
	}

	/* #ifdef H5 */
	.mp-wrap {
		height: 140rpx;
	}

	L

	/* #endif */
	.mp-wrap.ipx {
		height: 220rpx;
	}

	.mp-wrap .mp-logo {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
	}

	.mp-wrap .mp-logo image {
		width: 100%;
		height: 100%;
		border-radius: 8px;
	}

	.mp-wrap .info {
		width: 84%;
		height: 80rpx;
		position: relative;
		z-index: 1;
		margin-bottom: 20rpx;
	}

	.mp-wrap .info .name {
		width: auto;
		height: auto;
		font-size: 28rpx;
		color: #5A5A5A;
		position: absolute;
		z-index: 1;
		left: 0px;
		top: 0px;
	}

	.mp-wrap .info .desc {
		width: auto;
		height: auto;
		font-size: 24rpx;
		color: #5A5A5A;
		position: absolute;
		z-index: 1;
		left: 0px;
		top: 45rpx;
	}

	.mp-wrap .info .focus {
		width: auto;
		height: auto;
		border: 1px solid #28A622;
		border-radius: 4px;
		font-size: 28rpx;
		color: #28A622;
		position: absolute;
		z-index: 1;
		right: 0px;
		top: 14rpx;
		padding: 5rpx 20rpx;
	}

	/* #ifdef MP-WEIXIN */
	.mp-wrap2 {
		width: 100%;
		margin: 0 auto;
		height: 230rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		box-sizing: border-box;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.mp-wrap2.ipx {
		height: 250rpx;
	}

	/* #endif */
</style>